@red: #f40;
@primary: #ff0;
@width: 10px;
@height: @width + 20px;

.bordered() {
  border-top: dotted 1px black;
  border-bottom: 1px solid @red;
}

.center(@type: absolute) {
  position: @type;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.redcolor {
  color: @red;
  width: @width;
  height: @height;
  .bordered();
  .center(fixed);
  div {
    margin: if((2 > 1), 0, 3px);
    color: if((iscolor(@red)), @red, black);
  }
  .s1 {
    background: @primary;
    color: #fff;
  }
  .s2 {
    background-color: darken(@primary, 20%);
  }
  .s3 {
    background-color: lighten(@primary, 20%);
  }
}
